<template>
    <div>
        <div class='addBrand'>
            <h3>编辑品牌</h3>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <!-- <el-form-item label="品牌ID" prop="brandId">
                    <el-input  class='input' v-model="ruleForm.brandId"></el-input>
                </el-form-item> -->
                <el-form-item label="品牌名称:" prop="brandName">
                    <el-input class='input' v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="品牌介绍:" prop="brandStory">
                    <el-input class='input' :rows="10" type="textarea" v-model="ruleForm.story" :maxlength="300" placeholder="请输入品牌故事(300个字符以内)"></el-input>
                </el-form-item>
                <el-form-item label="品牌LOGO:" class="" prop="brandLogo">
                    <div class="prevImg" v-if="imageUrl">
                        <img height="200" :src="imageUrl" alt="">
                        <i class="el-icon-error" @click="deleteImgList()"></i>
                    </div>
                    <!-- {{item.goodsImg.length}} -->
                    <template v-if="imageUrl==''">
                        <div class="upload" v-loading="uploadLoading">
                            <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" multiple @change="upload($event)" />
                            <i class="el-icon-plus"></i>
                        </div>
                    </template>
                    <template v-else>
                        <div class="upload" style="display:inline-block">
                            <input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="upload($event)" />
                            <span>点击更换</span>
                        </div>
                    </template>
                    <p class="red" style="margin-top:10px;line-height:1.5">
                        <small>请选择1张活动logo图片上传(最多1张)</small>
                    </p>
                    <p class="red" style="margin-top:10px;line-height:1.5">
                        <small>建议尺寸：不小于200*200方图</small>
                    </p>
                </el-form-item>
                <el-form-item class='right-btn'>
                    <el-button class='' type="primary" @click="submitForm('ruleForm')">保存</el-button>
                    <el-button class='' type="primary" @click="goBack('ruleForm')">返回</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>
<script>
import {
    getBrandById,
    editBrand,
    getQiniuToken,
    qiniuBaseUrl
} from "../../data/postData";
export default {
    data() {
        return {
            ruleForm: {
                name: "",
                story: "",
                url: ""
            },
            imageUrl: "",
            uploadLoading: false,
            rules: {
                //   brandId: [
                //     { required: true, message: '选择品牌Id', trigger: 'blur' },
                //   ],
                //   brandName: [
                //     { required: true, message: '填写品牌名称', trigger: 'blur' },
                //   ],
                //   brandStory: [
                //     { required: true, message: '填写品牌故事', trigger: 'blur' },
                //   ]
            }
        };
    },
    mounted() {
        var id = this.$route.params.id,
            params = {
                data: {
                    brandId: id
                }
            };
        this.$fetch.post(getBrandById, params).then(res => {
            this.ruleForm = res.data;
            this.imageUrl = res.data.url;
            console.log(1111111);
            console.log(res.data);
        });
    },
    methods: {
        deleteImgList() {
            this.$confirm("确认删除？").then(_ => {
                this.imageUrl = "";
                this.$message({
                    message: "删除成功",
                    type: "success",
                    duration: 1500
                });
            });
        },
        upload(e) {
            const that = this;
            var files = e.target.files[0];
            let width, height;
            let reader = new FileReader();
            reader.onload = function(e) {
                var image = new Image();
                image.onload = function() {
                    width = image.width;
                    height = image.height;
                    if (width == height && width >= 200) {
                        that.uploadLoading = true;
                        that.$http
                            .get(getQiniuToken, {
                                params: {
                                    wxUid: "",
                                    wxSid: ""
                                }
                            })
                            .then(res1 => {
                                let config = {
                                    headers: {
                                        "Content-Type": "multipart/form-data"
                                    }
                                };
                                let formdata = new FormData(); //创建form对象
                                formdata.append("file", files, files.name);
                                formdata.append("chunk", "0"); //断点传输
                                formdata.append("chunks", "1");
                                formdata.append("token", res1.data.uptoken);
                                that.$http
                                    .post(
                                        "http://up-z1.qiniup.com",
                                        formdata,
                                        config
                                    )
                                    .then(res2 => {
                                        if (res2.data.key != "") {
                                            that.imageUrl =
                                                qiniuBaseUrl + res2.data.key;
                                            that.$message({
                                                message: "图片上传成功",
                                                type: "success",
                                                duration: 1000
                                            });
                                            that.uploadLoading = false;
                                        }
                                    });
                            });
                    } else {
                        that.$message({
                            message: "图片要求不小于200*200的方图",
                            type: "error",
                            duration: 1000
                        });
                    }
                };
                image.src = e.target.result;
            };
            reader.readAsDataURL(files);
        },
        goBack() {
            this.$router.go(-1);
        },
        submitForm() {
            var params = {
                data: {
                    brandId: "" + this.ruleForm.id,
                    name: this.ruleForm.name,
                    story: this.ruleForm.story,
                    url: this.imageUrl
                }
            };
            if (
                this.ruleForm.name !== "" &&
                this.ruleForm.story !== "" &&
                this.ruleForm.story != null &&
                this.ruleForm.name != null
            ) {
                this.$confirm("确认保存？").then(_ => {
                    this.$fetch
                        .post(editBrand, params)
                        .then(res => {
                            //    console.log(res.data)
                            //    this.$router.push({path:'/brandList'})
                            this.$message({
                                message: res.message,
                                type: "success",
                                duration: 1000
                            });
                            setTimeout(() => {
                                this.$router.go(-1);
                            }, 1500);
                        })
                        .catch(err => {
                            this.$message({
                                message: err.message,
                                type: "error",
                                duration: 1000
                            });
                        });
                });
            } else {
                this.$message({
                    message: "检查品牌名称,品牌介绍是否为空",
                    type: "error"
                });
            }
        }
    }
};
</script>
<style scoped lang="less">
.addBrand {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 0px;
    }
    .input {
        width: 50%;
    }
}
.avatar-uploader {
    height: 200px;
    width: 200px;
    border: 1px dashed #333;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.el-upload {
    width: 200px;
    height: 200px;
    text-align: center;
    border: 1px solid green;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.right-btn {
    position: absolute;
    right: 10%;
    margin-bottom: 22px;
}
.upload {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px dotted #ccc;
    position: relative;
    input {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 999;
        cursor: pointer;
    }
    i {
        font-size: 80px;
        color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
}
.prevImg {
    position: relative;
    display: inline-block;
    & + .prevImg {
        margin-left: 10px;
    }
    img {
        margin-top: 15px;
    }
    i {
        cursor: pointer;
    }
    i.el-icon-error {
        position: absolute;
        right: -8px;
        top: 4px;
        font-size: 20px;
        color: #ec5051;
        cursor: pointer;
    }
    i.el-icon-back {
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 20px;
        color: #409eff;
    }
}
.upload {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px dotted #ccc;
    position: relative;
    input {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 999;
        cursor: pointer;
    }
    i {
        font-size: 80px;
        color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    span {
        color: #ccc;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
        width: 100%;
        text-align: center;
    }
}
</style>
